<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Testing MultiSelect form widget | The Dojo Toolkit</title>

	<style type="text/css">
	@import "../../../dijit/tests/css/dijitTests.css";
	#select, #select2 {
		width:255px;
		height:300px;
		overflow:auto;
	}
	div#sel1, div#sel2 {
		float: left;
	}
	div#leftRightButtons {
		float: left;
		padding: 10em 0.5em 0 0.5em;
	}
	</style>


	<!-- required: the default dijit theme: -->
	<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>

	<!-- required: dojo.js -->
	<script type="text/javascript" src="../../../dojo/dojo.js"
		data-dojo-config="isDebug: true, parseOnLoad: false"></script>

	<!-- only needed for alternate theme testing: -->
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		require([
			"doh/runner",
			"dojo/query",
			"dojo/dom-form",
			"dojo/_base/json",
			"dojo/_base/array",
			"dojo/_base/lang",
			"dojo/dom-class",
			"dojo/parser",
			"dijit/dijit",
			"dijit/focus",
			"dijit/registry",
			"dijit/form/MultiSelect",
			"dijit/form/Button",
			"dijit/form/Form",
			"dijit/tests/helpers",
			"dojo/domReady!"
		], function(doh, query, domForm, json, array, lang, domClass, parser, dijit, focus, registry, MultiSelect, Button, Form,  helpers){

			parser.parse();

			// Add mode=test to the URL to run unit tests.
			var test = /mode=test/i.test(window.location.href);

			// ref a clonable node, then split it between two selects
			var c = query(".clone")[0];
			var l = -1;
			opt = function(){
				return dojo.byId((++l % 2 == 0 ? "select" : "select2" ));
			};
			// based on the the 'dijit' object
			var count=0;
			var select1Values = "dojo._defaultEasing";
			for(var i in dijit){
				var n = opt().appendChild(dojo.clone(c));
				n.value = count++;
				if(l % 2 == 0){
					select1Values += "," + i;
				}
				n.innerHTML = i;
			}

			// turn any non-data-dojo-type selects into widgets programatically:
			query("select").forEach(function(n){
				if(!dijit.byNode(n)){
					var foo = new dijit.form.MultiSelect({ name: n.name }, n).startup();
				}
			});

			// listen to the "move items" buttons
			query("button.switch")
				.connect("onclick",function(e){
					switch(e.target.id.toString()){
						case "left" : registry.byId("select").addSelected(registry.byId("select2")); break;
						case "right" : registry.byId("select2").addSelected(registry.byId("select")); break;
					}
			});

			// listen to the invert buttons
			query("button.invert")
				.connect("onclick",function(e){
					switch(e.target.id.toString()){
						case "i1" : registry.byId("select").invertSelection(); break;
						case "i2" : registry.byId("select2").invertSelection(); break;
						case "i3" : registry.byId("select3").invertSelection(); break;
					}
			});

			// there is only one debug button
			query(".debug").connect("onclick",function(e){
				console.log('select value:',registry.byId("select").get('value') + '/' + registry.byId("select").value);
				console.log('select2 value:',registry.byId("select2").get('value') + '/' + registry.byId("select2").value);
				console.log('select3 value:',registry.byId("select3").get('value') + '/' + registry.byId("select3").value);
			});

			query("#formSubmit").connect("onclick", function(e){
				// see what the real form says about our widgets:
				var vals = domForm.toJson("test");
				console.log(vals);
			});

			query("#s1").connect("onclick", function(e){
				registry.byId('select3').set('value', ['VA', 'WA']);
			});

			if(test){
				doh.register("API", [
					function initial(t){
						var vals = json.fromJson(domForm.toJson("test"));
						t.is(select1Values, query("option", registry.byId('select').containerNode).map(function(n){ return n.innerHTML; }).join(','));
						t.is("", registry.byId('select').get('value').join(''), 'easing widget value');
						t.is("", registry.byId('select2').get('value').join(''), 'second widget value');
						t.is("TN", registry.byId('select3').get('value').join(''), 'select3 widget value');
						t.is("", vals.easing, 'easing form value');
						t.is("", vals.second, 'second form value');
						t.is("TN", vals.select3, 'select3 form value');
						t.t(domClass.contains(registry.byId('select2').domNode, "dijitMultiSelect"), 'second base class');
						t.t(domClass.contains(registry.byId('select3').domNode, "dijitMultiSelect"), 'select3 base class');
						t.t(domClass.contains(registry.byId('select3').domNode, "addedClass"), 'select3 added class');
					},
					{
						name: "set",
						timeout: 1000,
						runTest: function(t){
							var d = new doh.Deferred();
							registry.byId('select3').set('value', ['TN','FL']);
							setTimeout(d.getTestCallback(function(){
								var vals = json.fromJson(domForm.toJson("test"));
								t.is("TN,FL", registry.byId('select3').get('value').join(','), "select3 widget value");
								t.is("TN,FL", vals.select3, "select3 form value");
							}), 500);
							return d;
						}
					}
				]);

				doh.run();
			}
		});
	</script>
</head>
<body class="claro" style="padding:20px" role="main">

		<h1 class="testTitle">dijit.form.MultiSelect:</h1>
		<p>Select one or more items in First or Second list and move them between lists using the buttons provided.</p>
		<form action="#" method="get" id="test" onsubmit="return false">

			<div>
				<div id="sel1" role="presentation">
					<label for="select">First list:</label><br>
					<select id="select" multiple size="7" name="easing" tabindex="1">
						<option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
					</select>
				</div>
				<div id="leftRightButtons" role="presentation">
					<span>
						<button class="switch" id="left" title="Move Items to First list">&lt;</button>
						<button class="switch" id="right" title="Move Items to Second list">&gt;</button>
					</span>
				</div>
				<div id="sel2" role="presentation">
					<label for="select2">Second list:</label><br>
					<select id="select2" multiple size="7" name="second">
					</select>
				</div>
			</div>

			<br style="clear: both;"/><br>

			<button class='invert' id="i1">invert first list</button>
			<button class="invert" id="i2">invert second list</button>
			<button id="formSubmit" type="submit">Submit</button>


		<button class="debug">call get('value')</button>

		<h3><label for="select3">markup:</label></h3>

		<select class="addedClass" id="select3" multiple data-dojo-type="dijit/form/MultiSelect"
			data-dojo-props='name:"select3",style:{height:"200px", width:"175px", border:"5px solid #ededed"}'>

			<option value="TN" selected>Tennessee</option>
			<option value="VA">Virginia</option>
			<option value="WA">Washington</option>
			<option value="FL">Florida</option>
			<option value="CA">California</option>

		</select>
		</form>
		<br><br>
		<button class='invert' id="i3">invert markup list</button>
		<button class='set' id="s1">set markup list to [VA, WA]</button>
</body>
</html>
